Parent for all Connector types. When you provide a Connector definition to an appropriate jsPlumb method,
you can do so either as a string, or as an array of the form [String, Object]
. In the former case, the string
must be one of the members from this namespace, such as "Bezier"
or "StateMachine"
. In the latter case,
the first argument to the array is the Connector name, and the second is a JS object containing
constructor parameters for the Connector, for instance
[ "Bezier", { curviness:75 } ]
Valid values for the constructor parameters for each Connector type are given below.
- Source:
- connectors.js, line 2
Members
-
<static> Bezier
-
This Connector draws a Bezier curve with two control points. You can provide a 'curviness' value which gets applied to jsPlumb's internal voodoo machine and ends up generating locations for the two control points. See the constructor documentation below.
- Source:
- connectors.js, line 18
-
<static> Flowchart
-
Provides 'Flowchart' connectors.
- Source:
- connectors.js, line 4
-
<static> StateMachine
-
Provides 'state machine' connectors.
- Source:
- connectors.js, line 10
-
<static> Straight
-
The Straight connector draws a simple straight line between the two anchor points.
- Source:
- connectors.js, line 14
Methods
-
<static> Bezier(params)
-
Parameters:
Name Type Description params
Object Constructor parameters.
Properties
Name Type Argument Default Description curviness
Integer <optional>
150 How 'curvy' you want the curve to be! This is a directive for the placement of control points, not endpoints of the curve, so your curve does not actually touch the given point, but it has the tendency to lean towards it. The larger this value, the greater the curve is pulled from a straight line.
stub
Integer <optional>
0 Optional value for a distance to travel from the connector's endpoint before beginning the Bezier curve.
- Source:
- connectors.js, line 19
-
<static> Flowchart(params)
-
Parameters:
Name Type Description params
Object Constructor parameters
Properties
Name Type Argument Default Description stub
Integer | Array.<Integer> <optional>
30 Minimum length for the stub at each end of the connector. This can be an integer, giving a value for both ends of the connections, or an array of two integers, giving separate values for each end.
gap
Integer <optional>
0 Gap to leave between the end of the connector and the element on which the endpoint resides. if you make this larger than stub then you will see some odd looking behaviour.
Like stub, this can be an array or a single value.cornerRadius
Float <optional>
0 Optional, defines the radius of corners between segments. Defaults to 0 (hard edged corners).
alwaysRespectStubs
Boolean <optional>
false Whether or not the connectors should always draw the stub, or, if the two elements are in close proximity to each other (closer than the sum of the two stubs), to adjust the stubs.
- Source:
- connectors.js, line 6
-
<static> StateMachine(params)
-
Parameters:
Name Type Description params
Object Constructor parameters.
Properties
Name Type Argument Default Description curviness
Float <optional>
10 Measure of how "curvy" the connectors will be. this is translated as the distance that the Bezier curve's control point is from the midpoint of the straight line connecting the two endpoints, and does not mean that the connector is this wide. The Bezier curve never reaches its control points; they act as gravitational masses.
margin
Integer <optional>
5 Distance from element to start and end connectors, in pixels.
proximityLimit
Integer <optional>
80 Sets the distance beneath which the elements are consider too close together to bother with fancy curves.
loopbackRadius
Integer <optional>
25 The radius of a loopback connector.
showLoopback
Boolean <optional>
true If set to false this tells the connector that it is ok to paint connections whose source and target is the same element with a connector running through the element. The default value for this is true; the connector always makes a loopback connection loop around the element rather than passing through it.
orientation
String <optional>
"clockwise" Valid values are
"clockwise"
and"anticlockwise"
. Indicates in which direction a loopback connection should be considered to be travelling.- Source:
- connectors.js, line 12
-
<static> Straight(params)
-
Parameters:
Name Type Description params
Object Constructor parameters.
Properties
Name Type Argument Default Description stub
Integer <optional>
0 Optional distance to travel from each endpoint before making the connection between the two.
sourceStub
Integer <optional>
Optional stub for the source endpoint only.
targetStub
Integer <optional>
Optional stub for the target endpoint only.
gap
Integer <optional>
0 Optional gap to leave between the endpoints and the start of the connector.
sourceGap
Integer <optional>
Optional gap for the source endpoint only.
targetGap
Integer <optional>
Optional gap for the target endpoint only.
- Source:
- connectors.js, line 16